<script lang="ts" setup>
import { download, formatEnum, get, loadFile, message, post } from '@/utils'
import useTable from '@/hooks/useTable'
import useValueEnum from '@/hooks/useValueEnum'
const props = defineProps<{
  show: boolean
  id: number | string
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const { formatColumns } = useTable()
const searchQuery = reactive({
  userId: props.id,
})
const formRef = ref()
const actionRef = ref()
const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-shop/admin/order/settle/place/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const { valueEnum: seller } = useValueEnum('/server-shop/admin/seller/list')
const columns = formatColumns([
  {
    title: '用户',
    dataIndex: 'user',
    hideInSearch: false,
    width: 200,
    fixed: 'left',
    align: 'left',
  },
  {
    title: '订单号',
    dataIndex: 'orderNo',
    hideInSearch: false,
    width: 200,
  },
  {
    title: '订单用户ID',
    dataIndex: 'orderUserId',
    width: 200,
  },
  {
    title: '支付金额',
    width: 200,
    dataIndex: 'payAmount',
  },
  {
    title: '外部订单流水号',
    dataIndex: 'payBizNo',
    width: 200,
  },
  {
    title: '支付单号',
    hideInSearch: false,
    width: 200,
    dataIndex: 'payNo',
  },
  {
    title: '归属商户',
    hideInSearch: false,
    width: 200,
    valueEnum: seller,
    dataIndex: 'sellerId',
  },
  // {
  //   title: '支付方式',
  //   hideInSearch: false,
  //   width: 200,
  //   dataIndex: 'payType',
  //   valueEnum: formatEnum(PayType),
  // },
  {
    title: '结算金额',
    width: 200,
    dataIndex: 'settleAmount',
  },
  {
    title: '结算状态',
    dataIndex: 'settleStatus',
    width: 90,
    hideInSearch: false,
    valueEnum: {
      '-1': { text: '不结算', status: 'Default' },
      0: { text: '未结算', status: 'Processing' },
      1: { text: '已结算', status: 'Success' },
    },
  },
  {
    title: '结算类型',
    dataIndex: 'settleType',
    width: 200,
    valueEnum: {
      direct: '直推',
      indirect: '间推',
    },
  },
  {
    title: '产生时间',
    width: 200,
    dataIndex: 'createTime',
  },
])
</script>
<template>
  <CModal v-model:visible="props.show" :footer="false" width="1200px" title="佣金记录" @cancel="emit('update:show', false)">
    <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title="" column-resizable :scroll="{ x: 1000 }" :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
      <template #user="{ record }">
        <a-space>
          <a-image width="40" :src="record.orderUserAvatar" />
          <div>
            <p>{{ record.orderUserNickName }}</p>
            <p>{{ record.orderUserMobile }}</p>
          </div>
        </a-space>
      </template>
    </ProTable>
  </CModal>
</template>
<style lang="less" scoped></style>
